<script setup lang="ts">
import { message } from "@/utils/message";
import { ElMessageBox } from "element-plus";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, reactive, onMounted, h } from "vue";
import { deviceDetection } from "@pureadmin/utils";
import { getConfig } from "@/config";
import { ArrowLeft, CirclePlus, MoreFilled,Paperclip,View} from "@element-plus/icons-vue";
import elAuth from '@/views/structureManagement/role/elementPermissions/elAuth/index.js';

const emit = defineEmits(["save"]);


/*--------------------1.页面内容---------------------*/

  //------1.1相关物料
  //1.1.1用户元素权限json
  const userAuth=ref({});
  //1.1.2具体页面路由
  const authPageRouter=ref([]);
  //1.1.3当前页权限json
  const pageAuth=ref({});


	//------1.2弹窗控制
	//1.2.1弹窗开关
  const drawer=ref(false);
  //1.2.2打开弹窗
  const openDrawer=(auth_element,auth_pages)=>{
    if(auth_element)userAuth.value=JSON.parse(auth_element);
    console.log(userAuth.value,'userAuth.value');
    if(auth_pages)authPageRouter.value=JSON.parse(auth_pages);
    getPageConfig(activeIndex.value);
    drawer.value=true;
  }
  //1.2.3关闭弹窗
  const closeDrawer=()=>{
    drawer.value=false;
  }
  //1.2.4抛出打开弹窗方法
  defineExpose({openDrawer});


  //------1.3左侧菜单控制
  //1.3.1当前菜单选中项
  const activeIndex=ref('/common');
  //1.3.3左侧菜单点击事件->获取当前页面权限配置json
  const getPageConfig=(e)=>{
    console.log(e,'e');
    activeIndex.value=e;
    pageAuth.value=elAuth.getPageConfig(e,userAuth.value);
  }


  //------1.4右侧内容控制
  //1.4.1权限元素显示判断
  const judgeShowEl=(el)=>{
    let show=true;
    if(el.showDepend=='consist'){
      show=true;
    }else{
      let depend=''+el.showDepend;
      depend=depend.replaceAll('consist','pageAuth.value');
      show=eval(depend);
    }
    return show;
  }
  //1.4.2权限元素下具体控制项显示判断
  const judgeShowSet=(set)=>{
    let show=true;
    if(['radio','checkBox'].includes(set.element)){
      if(set.options.length==0){show=false;}
    }
    return show;
  }
  //1.4.3依据权限el-key清空当前页面该权限下的所有设置
  const restoreEl=(el)=>{
    pageAuth.value[el].selfUsed=false;
    for(let per in pageAuth.value[el].sets){
      if(pageAuth.value[el].sets[per].value){
        let type=Object.prototype.toString.call(pageAuth.value[el].sets[per].value).slice(8,-1);
        if(type=='String'){
          pageAuth.value[el].sets[per].value='';
        }else if(type=='Object'||type=='Array'){
          pageAuth.value[el].sets[per].value=[];
        }
      }
    }
  }
  //1.4.4控制项内容变化事件->更新页面权限json的显示及角色权限
  const updatePage=()=>{
    let elements=document.querySelectorAll('.valid-el-auth');
    let validArr=Array.from(elements).map(element=>element.getAttribute('data-target'));
    for(let el in pageAuth.value){
      if(!validArr.includes(el)){
        restoreEl(el);
      }
    }
    userAuth.value=elAuth.getAuthByJson(activeIndex.value,pageAuth.value,validArr,userAuth.value);
    console.log(pageAuth.value,'pageAuth.value');
    console.log(userAuth.value,'userAuth.value');
  }



/*--------------------2.操作---------------------*/
  //------2.1整体控制
  //2.1.1清空角色所有元素权限
  const clearAll=()=>{
    userAuth.value={};
    for(let el in pageAuth.value){
      restoreEl(el);
    }
  }
  //2.1.2清空当前页元素权限
  const clearCurrentPage=()=>{
    for(let el in userAuth.value){
      if(userAuth.value[el].onpage==activeIndex.value){
        delete userAuth.value[el];
      }
    }
    for(let el in pageAuth.value){
      restoreEl(el);
    }
  }
  //2.1.3保存
  const saveBtnClick=()=>{
    emit("save",userAuth.value);
    drawer.value=false;
  }
</script>

<template>
  <div>
    <el-drawer v-model="drawer" size="100%" :with-header="false" direction="rtl">
      <div class="w-full h-full">
        <div class="header" style="border-bottom:1px solid #e5e5e5;">
          <div class="flex items-center">
            <div class="flex items-center" style="cursor: pointer"@click="closeDrawer">
              <el-icon><ArrowLeft /></el-icon>返回
            </div>
            <div class="title">角色元素权限配置</div>
          </div>
          <div class="f-r f-c-c">
            <el-button type="info" plain @click="clearAll"> 清空角色所有元素权限 </el-button>
            <el-button type="info" plain @click="clearCurrentPage"> 清空当前页设置 </el-button>
            <el-button type="primary" @click="saveBtnClick"> 保存 </el-button>
          </div>
        </div>
        <div class="flex justify-between">
          <div class="w-[210px]">
            <el-scrollbar height="calc(100vh - 80px)">
              <el-menu :default-active="activeIndex" unique-opened class="el-menu-custom" @select="getPageConfig">
                <div class="bt"><span></span>公共权限</div>
                <el-menu-item index="/common" @click="">
                  <span>公共要素权限</span>
                </el-menu-item>
                <div class="bt"><span></span>具体页面</div>
                <el-menu-item index="/home">
                  <span>首页</span>
                </el-menu-item>
                <template v-for="(item, index) in authPageRouter">
                  <el-sub-menu v-if="item.children && item.children.length" :index="item.path" >
                    <template #title>
                      <span>{{ item.meta.title }}</span>
                    </template>
                    <el-menu-item v-for="(cItem, cIndex) in item.children" :index="cItem.path">{{ cItem.meta.title }}</el-menu-item>
                  </el-sub-menu>
                  <el-menu-item v-else :index="item.path">
                    <span>{{ item.meta.title }}</span>
                  </el-menu-item>
                </template>
              </el-menu>
            </el-scrollbar>
          </div>
          <div style="flex:1">
            <el-scrollbar height="calc(100vh - 80px)" style="background-color: #efefef;">
              <div v-if="pageAuth" style="background-color: #FFFFFF;margin:16px;padding:15px;">
                <template v-for="(el,el_key) in pageAuth">
                  <div v-if="judgeShowEl(el)" :index="el_key" class="m-b-15 valid-el-auth" :data-target="el_key">
                    <div class="f-r f-c-c f-r-sb w100 bb bor-e5" style="padding:10px;background:#F5F5F5;">
                      <div class="f-r f-c-c">
                        <el-switch v-model="el.selfUsed" @change="updatePage" />
                        <div class="b" style="margin-left:7px;color:#000000;">{{el.name}}</div>
                      </div>
                      <template v-if="el.selfUsed" >
                        <el-popover placement="top-start" title="" :width="400" trigger="click">
                            <template #reference>
                              <el-icon size="16" style="cursor:pointer;"><View /></el-icon>
                            </template>
                            <div class="f14 b">一.权限模块信息</div>
                            <div>模块名称：{{el.name}}</div>
                            <div>模块标识：{{el.identity}}</div>
                            <div v-if="JSON.stringify(el.sets)!='{}'" class="f14 b m-t-15">二.控制项字典枚举：</div>
                            <template v-for="(set, set_key) in el.sets">
                              <div v-if="judgeShowSet(set)" :index="set_key" style="padding:5px 0px;">
                                <div>【{{set.name}}】（ {{set_key}} ）</div>
                                <div v-if="set.options" style="padding:5px;background:#F5F5F5;">
                                  <div v-for="(op,op_key) in set.options" :index="op_key">{{op.label}}-----{{op.value}}</div>
                                </div>
                              </div>
                            </template>
                        </el-popover>
                      </template>
                    </div>
                    <div class="f-r flex-wrap w100 bb" style="border-left:1px solid #e5e5e5;">
                      <template v-for="(set, set_key) in el.sets">
                       <div v-if="judgeShowSet(set)" :index="set_key" class="bb bor-e5" style="width:25%;padding:10px;border-top:none;border-left:none;">
                          <div class="f-r f-c-c m-b-15">
                            <el-icon size="16"><Paperclip /></el-icon>
                            <div class="b" style="margin-left:7px;">{{set.name}}</div>
                          </div>
                          <div v-if="set.element=='checkBox'">
                            <el-checkbox-group v-model="pageAuth[el_key]['sets'][set_key]['value']" @change="updatePage">
                                <el-checkbox v-for="(op,op_key) in set.options" :index="op_key" :label="op.label" :value="op.value" />
                            </el-checkbox-group>
                          </div>
                          <div v-if="set.element=='radio'">
                            <el-radio-group v-model="pageAuth[el_key]['sets'][set_key]['value']" @change="updatePage">
                                <el-radio v-for="(op,op_key) in set.options" :index="op_key" :value="op.value">{{op.label}}</el-radio>
                            </el-radio-group>
                          </div>
                          <div v-if="set.element=='input'">
                            <el-input v-model="pageAuth[el_key]['sets'][set_key]['value']" placeholder="多个字段以英文逗号隔开" clearable @input="updatePage" />
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-drawer__body) {
  padding: 16px 16px 16px 0;
}

.header {
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  .title {
    font-weight: bold;
    margin-left: 16px;
    padding-left: 16px;
    position: relative;
    &::after {
      content: "";
      width: 1px;
      height: 13px;
      background-color: #000000;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.bt {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #000;
  font-weight: bold;
  padding: 16px 6px 10px;
  span {
    display: block;
    width: 6px;
    height: 18px;
    background-color: var(--pure-theme-menu-active-before);
    margin-right: 8px;
  }
}
.content {
  margin-top: 16px;
}
:deep(.el-tree-node__content) {
  height: 46px !important;
  border-bottom: 5px solid #f5f5f5;
  padding: 20px;
}
.el-menu-custom .is-active {
  background-color: var(--pure-theme-menu-active-before) !important;
}
.el-menu-item.is-active span{
  color:#ffffff !important;
}
.el-sub-menu.is-active .el-menu.el-menu--inline .el-menu-item.is-active{
  color:#ffffff !important;
}
/*浮动布局*/
.f-c{
	display: flex;
	flex-direction:column;
}
.f-r{
	display: flex;
	flex-direction:row;
}
.f-r-s{
	justify-content:flex-start;
}
.f-r-sb{
	justify-content:space-between;
}
.f-r-sa{
	justify-content:space-around;
}
.f-r-c{
	justify-content:center;
}
.f-r-e{
	justify-content:flex-end;
}
.f-c-c{
	align-items:center;
}
.f-c-s{
	align-items:flex-start;
}
.f-c-e{
	align-items:flex-end;
}
.f-wrap{
	flex-wrap: wrap;
}
.f-nowrap{
	flex-wrap: nowrap;
}
.f1{
	flex: 1;
}
.grow1{
	flex-grow:1;
}
.grow2{
	flex-grow:2;
}
.f-s0{
	flex-shrink: 0;
}
/*盒子样式*/
.bb{
  box-sizing: border-box;
}
.w100{
  width:100%;
}
.m-l-15{
	margin-left:15px;
}
.m-r-15{
	margin-right:15px;
}
.m-t-15{
	margin-top:15px;
}
.m-b-15{
	margin-bottom:15px;
}
.m-l-20{
	margin-left:20px;
}
.m-r-20{
	margin-right:20px;
}
.m-t-20{
	margin-top:20px;
}
.m-b-20{
	margin-bottom:20px;
}
.bor-e5{
	border:1px solid #E5E5E5;
}
/*段落字样*/
.f14{
	font-size:14px !important;
}
.f16{
	font-size:16px !important;
}
.f18{
	font-size:18px !important;
}
.b{
	font-weight: bold;
}
</style>
